<template>
    <div >
        <div v-if="num != 0" class="ratio">
            <span :class="type === 'desc' ? 'triangle_desc' : 'triangle_incr'"></span>
            <span class="desc" :style="type === 'desc' ? 'color:green' : 'color:red'">{{ num }}%</span>
        </div>
        <div v-else class="ratio">
            <span>{{ num }}%</span>
        </div>
        
    </div>
</template>

<script>
export default {
    props: {
        num: {
            type: [Number, String],
            default: 0,
        }
    },
    computed: {
        type() {
            return this.num < 0 ? 'desc' : 'incr'
        },
    },
}
</script>

<style lang="less" scoped>
.ratio {
    display: flex;
    align-items: center;

    .desc {
        font-size: 12px;
        color: green;
        margin-left: 3px;
        transform: translateY(5px);
    }

    .triangle_desc {
        border-bottom: 5px solid transparent;
        border-top: 10px solid green;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        transform: translateY(10px);
        margin-left: 10px;
    }

    .triangle_incr {
        border-top: 5px solid transparent;
        border-bottom: 10px solid red;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        transform: translateY(5px);
        margin-left: 10px;
    }
}
</style>